<template>
    <div class="price-detail" :class="{ active: visible }">

        <div class="price-detail-current">
            <!-- <svg-icon name="design-dtg" v-if="dtgCount.length > 0" /> -->
            <!-- <svg-icon name="design-emb" v-if="embCount.length > 0" /> -->

            <CommonProcessIcon :icons="icons" />

            <span>Current price: </span>
            <blockquote @click="setVisible(!visible)">
                <CommonLevelDiscount :level="levelInfo" :price="getPriceRange(priceBody.product)"
                                     type="unit|discount|icon" />
            </blockquote>
        </div>

        <!-- <button @click="setVisible(!visible)">Pricing details</button> -->
        <div class="price-detail-dialog">
            <!-- <h2>Product variants</h2>
            <h6 @click="setVisible(false)"><i class="iconfont icon-guanbi"></i></h6> -->

            <div class="price-detail-scroller">
                <table :level="levelInfo.user_level">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Cost</th>
                            <!-- <th v-for="item in sizes" :key="item.id" v-html="item.size_name"></th> -->
                        </tr>
                    </thead>
                    <tbody>
                        <!-- 头部 -->
                        <tr>
                            <td>Garment ({{ sizeRange }})</td>
                            <td>
                                <CommonCurrencyRate :price="getPriceRange(priceBody.garment)" type="price" />
                            </td>
                            <!-- <td v-for="(col, index) in priceBody.garment" :key="col + '-' + index">
                                <CommonCurrencyRate :price="col" type="price" v-if="col" />
                                <span v-else>Free</span>
                            </td> -->
                        </tr>

                        <!-- 主体 -->
                        <tr v-for="row in priceBody.body" :key="row[0]">
                            <td>
                                <svg-icon name="design-emb" v-if="row.piece.type == 2" />
                                <svg-icon name="design-dtg" v-if="row.piece.type == 1" />
                                <span v-text="row.name"></span>
                            </td>

                            <td>
                                <span v-if="getPriceRange(row.cols) == '0'">Free</span>
                                <CommonCurrencyRate v-else :price="getPriceRange(row.cols)" type="price" />
                            </td>


                            <!-- <td v-for="(col, index) in row.cols" :key="col + '-' + index">
                                <CommonCurrencyRate :price="col" type="price" v-if="col" />
                                <span v-else>Free</span>
                            </td> -->
                        </tr>

                        <!-- 总价 -->
                        <tr>
                            <td>Product price</td>
                            <td name="product">
                                <CommonCurrencyRate :price="getPriceRange(priceBody.product)" type="price" />
                            </td>

                            <!-- <td name="product" v-for="(col, index) in priceBody.product" :key="col + '-' + index">
                                <CommonCurrencyRate :price="col" type="price" v-if="col" />
                                <span v-else>Free</span>
                            </td> -->
                        </tr>

                        <tr>
                            <td>
                                <CommonLevelDiscount :level="levelInfo" type="icon|label" />
                            </td>
                            <td>
                                <CommonLevelDiscount :level="levelInfo" :price="getPriceRange(priceBody.product)"
                                                     type="unit|discount" />
                            </td>
                            <!--
                            <td v-for="(col, index) in priceBody.product" :key="col + '-' + index">
                                <CommonLevelDiscount :level="levelInfo" :price="col" type="unit|discount" />
                            </td> -->
                        </tr>
                    </tbody>
                </table>
            </div>

            <p><svg-icon name="notify2" /> Shipping fee and taxes excluded</p>

        </div>
    </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
const surfaceNameMapping = {
    "Front Side": "Front",
    "Back Side": "Back",
    "Sleeve Left": "Left Sleeve",
    "Sleeve Right": "Right Sleeve",
    "Long Sleeve Left": "Sleeve Left",
    "Long Sleeve Right": "Sleeve Right",
    "Neck Label Inner": "Inside Neck Label",
}
export default {
    props: {
        sizes: {
            type: Array,
            default () {
                return [];
            },
        },
        levelInfo: { type: Object, default: () => (null) },
        price: {
            type: Array,
            default () {
                return [];
            },
        },
    },
    data () {
        return {
            visible: false,
            surfaceNameMapping
        };
    },
    computed: {
        ...mapState({
            currency: 'currency',
            rate: 'rate',
        }),
        ...mapGetters("designer", {
            pieces: "getPieces",
            piecesPrice: "getPiecesPrice",
        }),


        icons () {
            const result = []
            this.piecesPrice.find(i => i.piece.type == 1) && result.push('dtg')
            this.piecesPrice.find(i => i.piece.type == 2) && result.push('emb')
            return result;
        },

        sizeRange () {

            const list = this.sizes.slice(0).sort((a, b) => a.sort - b.sort)


            if (list.length == 0) {
                return ''
            } else if (list.length == 1) {
                return list[0].size_name
            } else {
                return list[0].size_name + '-' + list[list.length - 1].size_name
            }

        },

        // 主体
        priceBody () {

            const name = {
                'Front Side - Middle': 'Front center',
                'Front Side - Top': 'Front top',
                'Front Side - Bottom': 'Front bottom',
                'Front Side - Lower Left': 'Front bottom left',
                'Front Side - Lower Right': 'Front bottom right',
                'Front Side - Shoulder Left': 'Front left shoulder',
                'Front Side - Shoulder Right': 'Front right shoulder',
                'Front Side - Pocket': 'Front pocket',

                'Back Side - Middle': 'Back center',
                'Back Side - Top': 'Back top',
                'Back Side - Bottom': 'Back bottom',
                'Back Side - Lower Left': 'Back bottom left',
                'Back Side - Lower Right': 'Back bottom right',
                'Back Side - Neck Label Outer': 'Back outside neck label',

                'Sleeve Left': 'Left sleeve',
                'Sleeve Right': 'Right sleeve',
                'Long Sleeve Left': 'Left long sleeve',
                'Long Sleeve Right': 'Right long sleeve',
                'Neck Label Inner': 'Inside neck label',


                'Front Side - Left Leg Center': 'Front center left leg',
                'Front Side - Left Leg Top': 'Front upper left leg',
                'Front Side - Left Leg Bottom': 'Front lower left leg',
                'Front Side - Right Leg Center': 'Front center right leg',
                'Front Side - Right Leg Top': 'Front upper right leg',
                'Front Side - Right Leg Bottom': 'Front lower right leg',

                'Back Side - Left Leg Center': 'Back center left leg',
                'Back Side - Left Leg Top': 'Back upper left leg',
                'Back Side - Left Leg Bottom': 'Back lower left leg',
                'Back Side - Right Leg Center': 'Back center right leg',
                'Back Side - Right Leg Top': 'Back upper right leg',
                'Back Side - Right Leg Bottom': 'Back lower right leg',
                'Back Side - Left Pocket': 'Back left pocket',
                'Back Side - Right Pocket': 'Back right pocket',

                'Front Side - Left Leg Pocket': 'Left Leg Pocket',
                'Front Side - Right Leg Pocket': 'Right Leg Pocket',
            }

            // 商品原价
            const garment = this.sizes.map(i => i.price);

            // 商品总价
            const product = this.sizes.map(i => i.price);

            // 主体
            const body = [];
            let index = 1;

            // dtg
            this.piecesPrice.map(item => {

                if (item.piece.type == 1) {
                    const res = {
                        name: name[item.name] || item.name,
                        piece: item.piece,
                        cols: this.sizes.map((size, index) => item.value)
                    }
                    product.map((val, index) => product[index] = val + item.value)
                    body.push(res);
                }

            });

            this.piecesPrice.map(item => {

                if (item.piece.type == 2) {
                    product.map((val, index) => product[index] = val + item.value)

                    item.piece.layers.map(layer => {
                        const canvas_name = this.surfaceNameMapping[item.piece.canvas_name]
                        const layer_name = (layer.name.match(/[\d\.]+/g) || []).map(i => i + '″').join('×')
                        const res = {
                            name: `${canvas_name} ${layer_name}`,
                            piece: item.piece,
                            cols: this.sizes.map((size, index) => layer.price)
                        }
                        index += 1;
                        body.push(res);
                    })
                }
            });

            // 多工艺组合
            if (Array.from(new Set(this.piecesPrice.map(i => i.piece.type || 1))).length > 1) {
                const price = 299
                body.push({ name: 'Multi-process fee', piece: {}, cols: this.sizes.map((size, index) => price) })
                product.map((val, index) => product[index] = val + price)
            }

            return {
                garment: garment,
                body: body,
                product: product,
            }

        },

        // 价格区间
        // priceCost () {

        //     if (this.sizes && this.sizes.length > 0) {

        //         const piecePrice = this.piecesPrice.reduce((pre, cur) => pre + cur.value, 0)
        //         const pieceMulti = Array.from(new Set(this.piecesPrice.map(i => i.piece.type))).length > 1 ? 299 : 0

        //         const sizePrice = this.sizes.map((size) => size.price);
        //         const min = Math.min(...sizePrice) + piecePrice + pieceMulti;
        //         const max = Math.max(...sizePrice) + piecePrice + pieceMulti;

        //         if (min == max) {
        //             return min;
        //         } else {
        //             return min + " - " + max;
        //         }
        //     } else {
        //         return "-- --";
        //     }
        // },
    },
    methods: {
        // 从美分获取美元
        getDollar (cents) {
            if (typeof cents === 'string') {
                return cents
            } else {
                let value = parseFloat(cents) || 0;
                if (value) {
                    return (value * this.rate / 100).toFixed(2);
                } else {
                    return "Free";
                }
            }
        },


        // 获取价格区间
        getPriceRange (value) {

            if (!Array.isArray(value)) {
                return value
            } else {
                const min = Math.min(...value);
                const max = Math.max(...value);

                if (min == max) {
                    return min;
                } else {
                    return min + " - " + max;
                }
            }
        },

        eventListener (event) {
            let target = event.target;
            let warp = target.closest(".price-detail");

            if (warp && warp == this.$el) {
                // 不管
            } else {
                this.setVisible(false);
            }
        },
        setVisible (status) {
            this.visible = !!status;
            window.removeEventListener("click", this.eventListener);
            this.visible &&
                window.addEventListener("click", this.eventListener);
        },
    },
    // 销毁
    beforeDestroy: function () {
        window.removeEventListener("click", this.eventListener);
    },
};
</script>
<style lang="scss" scoped>
.price-detail {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    &.active {
        &>button {
            border: 1px solid #ea4c89;
            color: #ea4c89;
        }

        .price-detail-dialog {
            display: flex;
        }

        .price-detail-current .level-discount {
            border-bottom-color: transparent;

            &::v-deep>span[name='discount'] {
                color: #ea4c89;
            }
        }
    }
}

.price-detail-current {
    font-size: 16px;
    line-height: 20px;
    color: #000000;
    font-weight: normal;
    white-space: normal;
    text-align: center;
    display: flex;
    align-items: center;

    .process-icon {
        position: relative;
    }

    &>svg {
        width: 16px;
        height: 16px;
        margin-right: 4px;
    }

    &>span {
        margin-right: 4px;
    }

    blockquote {
        margin: 0;
        padding: 0;
    }

    .level-discount {
        cursor: pointer;

        &::v-deep>span[name='discount'] {
            border-bottom-style: solid;
            border-bottom-width: 1px;
        }

        //
        &:hover {
            border-bottom-color: transparent;

            &::v-deep>span[name='discount'] {
                color: #ea4c89;
                border-color: transparent;
            }
        }
    }
}

.price-detail-dialog {
    display: none;
    position: absolute;
    left: 50%;
    width: 440px;
    max-height: 439px;
    flex-direction: column;
    box-sizing: border-box;
    margin-left: 80px;
    bottom: 0;
    background: #ffffff;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    z-index: 9;
    overflow: hidden;

    &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        border-radius: 6px;
        border: 1px solid #d9d9d9;
        pointer-events: none;

    }

    &>p {
        white-space: nowrap;
        height: 34px;
        background: #fafafa;
        text-align: center;
        pointer-events: none;
        background: #fafafa;
        border-radius: 0 0 5px 5px;
        font-size: 12px;
        line-height: 34px;
        font-family: Roboto;
        font-weight: 400;
        color: #555555;
        display: flex;
        justify-content: center;
        align-items: center;

        svg {
            width: 12px;
            height: 12px;
            fill: #b8b8b8;
            margin-right: 4px;
        }
    }

    &>h2 {
        height: 16px;
        line-height: 16px;
        padding: 15px 45px 15px 0;
        white-space: nowrap;
        font-size: 14px;
        font-weight: normal;
        color: #000000;
        font-weight: 400;
        border-bottom: 1px solid #f2f2f2;
    }

    &>h6 {
        position: absolute;
        right: 0;
        top: 0;
        line-height: 45px;
        width: 45px;
        text-align: center;
        font-size: 20px;
        cursor: pointer;
    }

    .price-detail-scroller {
        overflow: auto;
        width: 100%;
        flex: 1;
    }

    table {
        width: 100%;
        border-radius: 5px 5px 0 0;

        .level-discount {
            display: inline-block;
            font-size: 12px;
            line-height: 16px;
            display: block;
            text-align: center;
            white-space: normal;
            word-break: break-all;

            &::v-deep {
                span {
                    margin: 0 2px;
                }

                span[name='icon'] {
                    width: 16px;
                    height: 16px;
                    background-size: 16px 16px;
                }

                span[name='unit'] {
                    color: inherit;
                }
            }
        }

        th {
            line-height: 20px;
            font-size: 14px;
            white-space: nowrap;
            padding: 7px 10px;
            text-align: center;
            font-weight: normal;
            background: #fafafa;
            font-size: 12px;
            font-family: Roboto-Bold, Roboto;
            font-weight: normal;
            color: #000000;
            border-bottom: 1px solid #ededed;
            width: 50%;
        }

        td {
            line-height: 34px;
            height: 34px;
            font-size: 12px;
            padding: 0 10px;
            text-align: center;
            white-space: nowrap;
            font-family: Roboto;
            font-weight: 400;
            color: #555555;
            border: 1px solid #ededed;

            &[name='product'] .currency-rate {
                text-decoration: line-through;
                color: #000;
                font-family: Roboto-Medium, Roboto;
            }
        }

        tr th:first-child,
        tr td:first-child {
            padding-left: 6px;
            text-align: left;
            font-size: 12px;
            font-family: Roboto-Medium, Roboto;
            font-weight: normal;
            color: #000000;

            .level-discount {
                text-align: left;
                font-family: Roboto-Medium, Roboto;
                font-size: 12px;

                &::v-deep span[name='icon'] {
                    margin-left: 0;
                }
            }
        }

        // tr th:last-child,
        // tr td:last-child {
        //     padding-right: 6px;
        //     text-align: right;
        // }

        tbody tr td:first-child {
            position: relative;
            padding-left: 24px;

            svg {
                position: absolute;
                left: 8px;
                top: 50%;
                transform: translateY(-50%);
                width: 12px;
                height: 12px;
                display: inline-block;
                vertical-align: middle;
            }

            .level-discount {
                margin-left: -20px;
            }
        }

        tbody tr:nth-child(2n) td {
            background: #f7f7f7;
        }

        &[level='1'] {
            tbody td[name='product'] .currency-rate {
                text-decoration: none;
            }

            tbody tr:last-child {
                display: none;
            }
        }
    }
}
</style>
